<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码修改</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .navbar {
            background-color: #ff5000;
            color: white;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .navbar .logo {
            display: flex;
            align-items: center;
        }
        .navbar .logo span {
            margin-left: 10px;
        }
        .navbar a {
            color: white;
            text-decoration: none;
            margin: 0 10px;
        }
        .search-bar {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }
        .search-bar input {
            width: 500px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px 0 0 5px;
        }
        .search-bar button {
            padding: 10px;
            background-color: #ff5000;
            border: none;
            color: white;
            border-radius: 0 5px 5px 0;
            cursor: pointer;
        }
        .content-box {
            display: flex;
            padding: 20px;
        }
        .left-nav {
            width: 20%;
            background-color: #f5f5f5;
            padding: 10px;
        }
        .left-nav a {
            display: block;
            text-decoration: none;
            color: #333;
            padding: 10px 20px;
            margin: 5px 0;
            background-color: #fff;
            border-radius: 5px;
        }
        .left-nav a.active, .left-nav a:hover {
            background-color: #ff5000;
            color: white;
        }
        .right-content {
            width: 75%;
            margin-left: 5%;
        }
        .right-title {
            font-size: 24px;
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input, .form-group select {
            width: calc(100% - 22px);
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .btn-submit {
            padding: 10px 20px;
            background-color: #ff5000;
            border: none;
            color: white;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .btn-submit:hover {
            background-color: #e04c00;
        }
    </style>
</head>
<body>
<div class="navbar">
    <div class="logo">机械工业</div>
    <div class="nav-links">
        <a id="index1Link" href="#">首页</a>

    </div>
</div>

<div class="search-bar">
    <input type="text" placeholder="搜索商品、店铺">
    <button>搜索</button>
</div>

<div class="content-box">
    <div class="left-nav">
        <a id="userMessageLink" href="#">收货地址管理</a>
        <a id="orderlistLink" href="#">我的订单</a>
        <a id="cartLink" href="#">我的购物车</a>
        <a id="information_modificationLink" href="#">个人资料</a>
        <a id="password_modificationLink" href="#" class="active">修改密码</a>
    </div>

    <div class="right-content">
        <div class="right-title">修改密码</div>
        <div id="passwordFormContainer">
            <!-- 密码修改表单将通过AJAX加载 -->
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const userId = getUserIdFromUrl(); // 动态获取用户ID

        // 更新左侧导航栏链接
        document.getElementById("index1Link").href = `index1?id=${userId}`;
        document.getElementById("userMessageLink").href = `userMessage?id=${userId}`;
        document.getElementById("cartLink").href = `cart?id=${userId}`;
        document.getElementById("orderlistLink").href = `orderlist?id=${userId}`;
        document.getElementById("information_modificationLink").href = `information_modification?id=${userId}`;
        document.getElementById("password_modificationLink").href = `password_modification?id=${userId}`;

        const passwordFormContainer = document.getElementById('passwordFormContainer');

        // 使用AJAX请求后端接口获取用户问题信息和其他数据
        fetch(`/users/${userId}`)
            .then(response => response.json())
            .then(data => {
                if (data.question) {
                    // 将问题显示在表单中
                    passwordFormContainer.innerHTML = `
                        <form id="passwordChangeForm">
                            <div class="form-group">
                                <label for="question">安全问题</label>
                                <input type="text" id="question" name="question" value="${data.question}" readonly>
                            </div>
                            <div class="form-group">
                                <label for="answer">安全问题答案</label>
                                <input type="text" id="answer" name="answer" required>
                            </div>
                            <div class="form-group">
                                <label for="newPassword">新密码</label>
                                <input type="password" id="newPassword" name="newPassword" required>
                            </div>
                            <button type="submit" class="btn-submit">修改密码</button>
                        </form>
                    `;

                    // 确保表单加载完毕后再绑定事件
                    document.getElementById('passwordChangeForm').addEventListener('submit', function(event) {
                        event.preventDefault();
                        var formData = new FormData(this);
                        var answer = formData.get('answer');
                        var newPassword = formData.get('newPassword');

                        fetch(`/users/${userId}/updatePassword?asw=${encodeURIComponent(answer)}&newPassword=${encodeURIComponent(newPassword)}`, {
                            method: 'PATCH',
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        })
                            .then(response => {
                                if (response.ok) {
                                    alert('密码修改成功');
                                } else {
                                    alert('安全问题答案不正确或更新失败，请稍后再试');
                                }
                            })
                            .catch(error => {
                                console.error('Error:', error);
                                alert('更新失败，请稍后再试');
                            });
                    });

                } else {
                    passwordFormContainer.innerHTML = '<p>加载用户安全问题失败，请稍后再试。</p>';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                passwordFormContainer.innerHTML = '<p>加载用户数据失败，请稍后再试。</p>';
            });
    });

    function getUserIdFromUrl() {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get('id');
    }
</script>

</body>
</html>
